<div class="card" *ngIf="isLoading">
  <h4 class="card-header">Loading...</h4>
  <div class="card-block text-xs-center">
    <i class="fa fa-circle-o-notch fa-spin fa-3x"></i>
  </div>
</div>

<app-toast [message]="toast.message"></app-toast>

<div class="card" *ngIf="!isLoading">
  <h4 class="card-header">Members({{cats.length}})</h4>
  <div class="card-block">
    <table class="table table-bordered table-striped">
      <thead class="thead-default">
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Weight</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody *ngIf="cats.length === 0">
        <tr>
          <td colspan="4">There are no members in the DB. Add a new member below.</td>
        </tr>  
      </tbody>
      <tbody *ngIf="!isEditing">
        <tr *ngFor="let cat of cats">
          <td>{{cat.name}}</td>
          <td>{{cat.age}}</td>
          <td>{{cat.weight}}</td>
          <td>
            <button class="btn btn-sm btn-warning" (click)="enableEditing(cat)"><i class="fa fa-pencil"></i> Edit</button> <button class="btn btn-sm btn-danger" (click)="deleteCat(cat)"><i class="fa fa-trash"></i> Delete</button>
          </td>
        </tr>  
      </tbody>
      <tbody *ngIf="isEditing">
        <tr>
          <td colspan="4">
            <form class="form-inline" #form="ngForm" (ngSubmit)="editCat(cat)" style="display:inline">
              <div class="form-group">
                  <input class="form-control" type="text" name="name" [(ngModel)]="cat.name" placeholder="Name" required>
              </div>
              <div class="form-group">
                <input class="form-control" type="number" name="age" [(ngModel)]="cat.age" placeholder="Age" min="0" required>
              </div>
              <div class="form-group">
                <input class="form-control" type="number" name="weight" [(ngModel)]="cat.weight" placeholder="Weight" step="any" min="0" required>
              </div>
              <button class="btn btn-sm btn-primary" type="submit" [disabled]="!form.form.valid"><i class="fa fa-floppy-o"></i> Save</button>
            </form>
            <button class="btn btn-sm btn-warning" (click)="cancelEditing()"><i class="fa fa-times"></i> Cancel</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

<div class="card" *ngIf="!isEditing">
  <h4 class="card-header">Add new member</h4>
  <div class="card-block">
    <form class="form-inline" [formGroup]="addCatForm" (ngSubmit)="addCat()" style="text-align:left">
      <div class="form-group">
          <input class="form-control" type="text" name="name" formControlName="name" placeholder="Name">
      </div>
      <div class="form-group">
        <input class="form-control" type="number" name="age" formControlName="age" placeholder="Age" min="0">
      </div>
      <div class="form-group">
        <input class="form-control" type="number" name="weight" formControlName="weight" placeholder="Weight" step="any" min="0">
      </div>
      <button class="btn btn-primary" type="submit" [disabled]="!addCatForm.valid"><i class="fa fa-floppy-o"></i> Add</button>
    </form>
  </div>
</div>
<hr>

<div class="card" *ngIf="!isLoading">
  <h4 class="card-header">Files</h4>
  <div class="card-block">
    <button class="btn btn-sm btn-primary"><i class="fa fa-pencil"></i>Rename</button>
    <button class="btn btn-sm btn-success"><i class="fa fa-pencil"></i>Copy</button>
    <button class="btn btn-sm btn-info"><i class="fa fa-pencil"></i>Move</button>
    <button class="btn btn-sm btn-danger"><i class="fa fa-pencil"></i>Delete</button>
    
    <table class="table table-bordered table-striped">
      <thead class="thead-default">
        <tr>
          <th style="width:5%"><input type="checkbox"></th>
          <th>Name</th>
          <th>Type</th>
          <th>IsDirectory</th>
          <th>Size</th>
          <th>Create Time</th>
        </tr>
      </thead>
      <tbody *ngIf="files.length === 0">
        <tr>
          <td colspan="4">There are no file in the disk.</td>
        </tr>  
      </tbody>
      <tbody *ngIf="!isEditing">
        <tr  *ngFor="let file of files">
          <template [ngIf]="file.isDirectory">
               <th><input type="checkbox"></th>
          <td>{{file.name}}</td>
          <td></td>
          <td>{{file.isDirectory}}</td>
          <td></td>
          <td></td>
          </template>
          <template [ngIf]="!file.isDirectory">
               <th><input type="checkbox"></th>
          <td>{{file.name}}</td>
          <td>{{file.ext}}</td>
          <td>{{file.isDirectory}}</td>
          <td>{{file.info.size}}</td>
          <td>{{file.info.ctime}}</td>
          </template>
          
        </tr>  
      </tbody>
      </table>
  </div>
</div>
